import { defineComponent, reactive, onUnmounted } from "vue";
import "./index.scss";
import Left from "./left";
import Middle from "./middle";
import Right from "./right";
import Setting from "./setting";
import electricity from "@/assets/images/iot/snapshot/7.png";
import { dayjs } from "element-plus";
// import VScaleScreen from "v-scale-screen";
const MonitorScreen = defineComponent({
	name: "Screen", // 动态引入需要
	label: "大屏", // 动态引入需要
	image: electricity, // 动态引入需要
	setup() {
		const defaultData = reactive({
			currDay: "",
			currentTime: ""
		});
		// 添加定时器
		const timer = setInterval(() => {
			defaultData.currDay = dayjs().format("YYYY-MM-DD");
			defaultData.currentTime = dayjs().format("HH:mm:ss");
		}, 1000);
		onUnmounted(() => {
			// 卸载页面清除定时器
			clearInterval(timer);
		});
		const currentPage = ref("main");
		const isFullscreen = ref(false);
		const fullScreen = () => {
			let fullarea = document.getElementById("monitor-screen");
			if (!fullarea) {
				return;
			}
			if (!document.fullscreenElement) {
				isFullscreen.value = true;
				// 全屏
				fullarea.requestFullscreen();
			} else {
				isFullscreen.value = false;
				// 退出全屏
				if (document.exitFullscreen) {
					document.exitFullscreen();
				}
			}
		};
		return () => {
			return (
				// <VScaleScreen class="monitor-screen" width={1720} height={980} boxStyle={{ backgroundColor: "#000127" }}>
				<div class="monitor-screen" id="monitor-screen">
					{/* 头部 */}
					<div class="monitor-screen-title">
						<div class="title-time flex-1">
							<span>{defaultData.currDay}</span>
							<span>{defaultData.currentTime}</span>
						</div>
						<div class="label flex-1">智慧水务二次供水监控平台</div>
						<div class="flex flex-1">
							<div
								class="btn ml-32"
								onClick={() => {
									currentPage.value = "main";
								}}
							>
								平台信息
							</div>
							<div
								class="btn"
								onClick={() => {
									currentPage.value = "setting";
								}}
							>
								参数设置
							</div>
						</div>
						<div
							class={`iconfont text-2xl cursor-pointer ${isFullscreen.value ? "iconbx-exit-fullscreen" : "iconbx-fullscreen"}`}
							onClick={fullScreen}
							style={{ lineHeight: "30px" }}
						></div>
					</div>
					{currentPage.value == "main" ? (
						<div class="monitor-screen-content">
							{/* 左边 */}
							<Left />
							{/* 中间 */}
							<Middle />
							{/* 右边 */}
							<Right />
						</div>
					) : null}
					{currentPage.value == "setting" ? (
						<div class="monitor-screen-content">
							<Setting></Setting>
						</div>
					) : null}
				</div>
				//	</VScaleScreen>
			);
		};
	}
});
export default MonitorScreen;
